<template>
  <div class="workOrder_wating">
    <!-- 搜索搜索框 -->
    <div class="workSerach">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        class="demo-ruleForm"
        :inline="true"
      >
        <el-form-item label="工单编号:" prop="workOrderNumber">
          <el-input
            v-model="ruleForm.workOrderNumber"
            placeholder="请输入工单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号:" prop="deviceNumber">
          <el-input
            v-model="ruleForm.deviceNumber"
            placeholder="请输入设备编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称:" prop="deviceName">
          <el-input
            v-model="ruleForm.deviceName"
            placeholder="请输入设备名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="设备类型:" prop="deviceType">
          <el-select
            v-model="ruleForm.deviceType"
            placeholder="请选择设备类型"
            filterable
            clearable
          >
            <el-option
              v-for="item in sheType"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号:" prop="modelId">
          <el-select
            v-model="ruleForm.modelId"
            placeholder="请选择设备型号"
            filterable
            clearable
          >
            <el-option
              v-for="item in sheList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备分支:">
          <el-cascader
            v-model="workingStr"
            :options="workingWordOption"
            :props="workingWordProps"
            @change="handleChange(workingStr)"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="工单状态:" prop="status">
          <el-select v-model="ruleForm.status" placeholder="请选择工单状态" filterable clearable>
            <el-option v-for="item in workOrder" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="时间:">
          <!-- 日历 -->
          <div class="workDate">
            <el-date-picker
              v-model="value1"
              class="work_date"
              value-format="yyyy-MM-dd"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
              ref="referenceRef"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="region">
          <el-button type="primary" @click="handlerSerah">确认搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 全部工单 设备告警工单 设备保修工单 -->
    <div class="work_bottom">
      <!-- 按钮 -->
      <div class="work_btn">
        <div
          class="work_btn_item"
          style="background: #fff; border: 1px solid #ebeef3"
        >
          <div class="work_btn_item_left">
            <ul>
              <li>全部工单</li>
              <li style="color: #0077f8">
                <span style="font-size: 30px; color: #0077f8">{{
                  orderCountList.all
                }}</span>
                个
              </li>
              <li>
                <img src="../../assets/images/zh/上升 (1).png" alt />
                <span style="color: #0077f8"
                  >{{ (orderCountList.all_percent * 100).toFixed(2) }}%
                  相比昨天</span
                >
              </li>
            </ul>
          </div>
          <div class="work_btn_item_right">
            <div class="line"></div>
            <div class="line_border">
              <img src="../../assets/images/zh/任务.png" alt />
            </div>
          </div>
        </div>
        <div
          class="work_btn_item"
          style="background: #fff; border: 1px solid #ebeef3"
        >
          <div class="work_btn_item_left">
            <ul>
              <li>
                <span style="color: #000">设备告警工单(个)</span>
              </li>
              <li style="color: #0077f8">
                <span style="font-size: 30px; color: #0077f8">{{
                  orderCountList.warning
                }}</span>
                个
              </li>
              <li>
                <img src="../../assets/images/zh/上升.png" alt />
                <span style="color: #34aa44"
                  >{{ (orderCountList.warn_percent * 100).toFixed(2) }}%
                  相比昨天</span
                >
              </li>
            </ul>
          </div>
          <div class="work_btn_item_right">
            <div class="line" style="background: #eaedf3"></div>
            <div class="line_border">
              <img src="../../assets/images/zh/故障报修 (1).png" alt />
            </div>
          </div>
        </div>
        <div
          class="work_btn_item"
          style="background: #fff; border: 1px solid #ebeef3"
        >
          <div class="work_btn_item_left">
            <ul>
              <li>
                <span style="color: #000">设备报修工单(个)</span>
              </li>
              <li style="color: #0077f8">
                <span style="font-size: 30px; color: #0077f8">{{
                  orderCountList.repair
                }}</span>
                个
              </li>
              <li>
                <img src="../../assets/images/zh/上升 (2).png" alt />
                <span style="color: #e6492d"
                  >{{ (orderCountList.repair_percent * 100).toFixed(2) }}%
                  相比昨天</span
                >
              </li>
            </ul>
          </div>
          <div class="work_btn_item_right">
            <div class="line" style="background: #eaedf3"></div>
            <div class="line_border">
              <img src="../../assets/images/zh/故障报修 (1) (1).png" alt />
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="work_bottom_jindu">
        <!-- 上边部分 -->
        <div
          class="work_bottom_jindu_top"
          v-for="(item, index) in workingOrderlist"
          :key="item.id"
        >
          <div
            style="display: flex;
    flex-direction: row;
    justify-content: space-between;"
          >
            <div
              style="display: flex;
    flex-direction: row;
    justify-content: space-between;"
            >
              <ul class="work_bottom_jindu_top_one">
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>工单编号:{{ item.workOrderNumber }}</span>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span v-if="item.workOrderType == 0">工单类型:告警</span>
                  <span v-if="item.workOrderType == 1">工单类型:报修</span>
                  <span v-if="item.workOrderType == 2">工单类型:保养</span>
                  <span v-if="item.workOrderType == 3">工单类型:维修</span>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>报修日期:{{ item.add_time }}</span>
                </li>
                <li
                  style="display: flex;
    flex-direction: row;"
                >
                  <div>
                    <img
                      src="../../assets/images/zh/ic- 设备编号4 (1).png"
                      alt
                    />
                  </div>
                  报修内容:
                  <p style="width:340px;word-wrap: break-word">
                    {{ item.content }}
                  </p>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>报修图片/视频:</span>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handlerShowPic(item.id)"
                    >点击查看</el-button
                  >
                </li>
              </ul>
              <ul class="work_bottom_jindu_top_one work_bottom_jindu_top_two">
                <li class="order_style">
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>设备编号:{{ item.deviceNumber }}</span>
                </li>
                <li class="order_style">
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>设备名称:{{ item.name }}</span>
                </li>
                <li class="order_style">
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>设备类型:{{ item.typeName }}</span>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>设备型号:{{ item.modelName }}</span>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span>所属分支:{{ item.org }}</span>
                </li>
                <li>
                  <img src="../../assets/images/zh/ic- 设备编号4 (1).png" alt />
                  <span style="color: #ffb300" v-if="item.processingStatus == 0"
                    >工单状态:待处理</span
                  >
                  <span v-if="item.processingStatus == 1">工单状态:已受理</span>
                  <span v-if="item.processingStatus == 2"
                    >工单状态:待确认工单</span
                  >
                  <span v-if="item.processingStatus == 3"
                    >工单状态:已确认工单</span
                  >
                  <span v-if="item.processingStatus == 9"
                    >工单状态:已忽略工单</span
                  >
                  <span v-if="item.processingStatus == 4">工单状态:已完成</span>
                </li>
              </ul>
            </div>
            <div class="work_bottom_right">
              <el-button
                class="work_bottom_jindu_top_one_btn"
                type="primary"
                @click="handlerTask(item.id)"
                icon="el-icon-circle-check"
                v-if="item.processingStatus == 0"
              >
                <!-- <img src="../../assets/images/zh/派单 (3).png" alt style=" vertical-align:middle;  " /> -->
                受理工单
              </el-button>
              <el-button
                class="work_bottom_jindu_top_one_btn"
                style="background: #eaedf3"
                @click="handlerNowork(item.id, item.deviceId)"
                icon="el-icon-circle-close"
                v-if="item.processingStatus == 0"
              >
                <!-- <img src="../../assets/images/zh/派单 (3).png" alt style=" vertical-align:middle;  " /> -->
                忽略工单
              </el-button>
            </div>
          </div>

          <el-button
            style="margin: 20px;width:150px"
            @click="handlerProscc($event, item.id, index)"
          >
            显示工单详细进度
            <!-- <i class="el-icon-upload2 el-icon--right"></i> -->
          </el-button>
          <!-- 时间 -->
          <el-timeline style="margin-left: 30px" v-if="showTimeline[index]">
            <span v-if="orderNO == '暂无工单信息'" style="color: red">{{
              orderNO
            }}</span>
            <el-timeline-item
              v-else
              v-for="(item, index) in orderProcessList"
              :key="index"
              :timestamp="item.add_time"
              >{{ item.content }}</el-timeline-item
            >
          </el-timeline>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="ruleForm.pageSize"
          :current-page="ruleForm.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>
    </div>
    <!-- 查看图片 -->
    <el-dialog
      :visible.sync="showPicdialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-tabs>
        <el-tab-pane label="报修图片" style="showpic">
          <!-- 点击图片切换 -->

          <!-- 图片按钮 -->
          <div
            class="showpicTop"
            style="display: flex; flex-direction: row; justify-content: center"
          >
            <div
              class="showpicTop_item"
              v-for="item in imglist"
              style="cursor: pointer; margin-bottom: 40px"
            >
              <img
                :src="item.pictureAddress"
                alt
                style="width: 100px"
                @click="handlerShowimg(item.id)"
              />
            </div>
          </div>
          <img
            :src="imgsrc"
            alt
            style="height: 600px; width: 100%"
            v-if="showimg"
          />
          <span v-if="imglist.length === 0">暂无图片</span>
          <!-- <el-carousel trigger="click" height="600px" :autoplay="false">
            <el-carousel-item v-for="item in imglist" :key="item.id">
              <img :src="imgsrc" alt style=" height:600px;width:100%" v-if="showimg" />
            </el-carousel-item>
          </el-carousel>-->
        </el-tab-pane>
        <el-tab-pane label="报修视频" style="showpic">
          <!-- 点击视频切换 -->

          <!-- 图片按钮 -->
          <div
            class="showpicTop"
            style="display: flex; flex-direction: row; justify-content: center"
          >
            <div
              class="showpicTop_item"
              v-for="item in videoList"
              style="cursor: pointer; margin-bottom: 40px"
            >
              <video
                :src="item.videoAddress"
                controls="controls"
                class="showvideo"
                @click="handlerShowvideo(item.id)"
                v-if="showVideo"
              >
                您的浏览器不支持 video 标签。
              </video>
            </div>
          </div>
          <video
            :src="videosrc"
            controls="controls"
            style="height: 600px; width: 100%"
            v-if="videosrc != ''"
          >
            您的浏览器不支持 video 标签。
          </video>
          <span v-if="videoList.length === 0">暂无视频</span>
          <!-- <el-carousel trigger="click" height="600px" :autoplay="false">
            <el-carousel-item v-for="item in imglistBig" :key="item.id">
              <img :src="item.img" alt style=" height:600px;width:100%"  />
            </el-carousel-item>
          </el-carousel>-->
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showPicdialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 忽略工单 -->
    <el-dialog
      title="忽略工单"
      :visible.sync="huDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="huForm"
        :rules="huRules"
        ref="huRef"
        class="demo-ruleForm"
      >
        <el-form-item prop="remark">
          <el-input
            type="textarea"
            v-model="huForm.remark"
            placeholder="忽略原因(必填)"
            maxlength="40"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="huDialog = false">取 消</el-button>
        <el-button type="primary" @click="handlerSureOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  menuSel,
  orderListSel,
  devicTypeList,
  devicModelList,
  orderSearch,
  orderProcess,
  orderCount,
  orderPathSel,
  orderStatusChange
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
// 引入分页组件
export default {
  data() {
    return {
      value1: null,
      ruleForm: {
        pageNumber: 1,
        pageSize: 10,
        status: 1,
        deviceNumber: "",
        deviceName: "",
        deviceType: "",
        modelId: "",
        projectId: "",
        groupId: "",
        storeId: "",
        startTime: "",
        endTime: "",
        workOrderNumber: "",
        companyId: ""
      },
      activities: [
        {
          timestamp: "2018-04-15",
          content: "活动按期开始"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        }
      ],
      // 显示图片和视频
      showPicdialogVisible: false,
      // 显示图片的tab切换name
      showPicname: "first",
      // 显示图片
      showimg: true,
      // 显示视频
      showVideo: true,
      // 点击选中那个图片的src
      imgsrc: "",
      // 点击选中那个视频的src
      videosrc: "",
      // 图片数组
      imglist: [],
      // 视频数组
      videoList: [],
      // 三级选中的数据
      workingStr: "",
      //接口返回的数据
      workingWordOption: [],
      // 设备分支的label chldren
      workingWordProps: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true
      },
      workingQuery: {},
      // 工单列表
      workingOrderlist: [],
      // 设备型号列表
      sheList: [],
      //设备类型列表
      sheType: [],
      // 工单进度列表
      orderProcessList: [],
      // 忽略工单的弹框
      huDialog: false,
      // 忽略工单的表单
      huForm: {
        remark: ""
      },
      huRules: {
        //  remark:[
        //      { required: true, message: '请输入忽略内容', trigger: 'blur' },
        //  ]
      },
      // 工单统计的数据
      orderCountList: {
        all: "",
        warning: "",
        repair: "",
        all_percent: "",
        warn_percent: "",
        repair_percent: ""
      },
      showTimeline: [],
      // 忽略工单的id
      NoOrderId: "",
      // 忽略工单的设备id
      deviceId: "",
      // 忽略工单的用户id
      userId: "",
      workOrder: [
        {
          id: 1,
          name: "已受理"
        },
        {
          id: 2,
          name: "待确认工单 "
        },
        {
          id: 3,
          name: "已确认工单"
        },
        {
          id: 9,
          name: "已忽略工单"
        },
        {
          id: 4,
          name: "已完成"
        },
        {
          id: 0,
          name: "待处理"
        }
      ],
      selectDate: {
        type: Array,
        default: function() {
          return [];
        }
      },
      count: 0, // 工单总条数
      orderNO: ""
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.ruleForm.pageNumber = 1;
      this.handlerGetWorkOrder();
      this.getNoworkOrder();
      this.getShebeiList();
      this.getShebeiListType();
      this.getorderCount();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.handlerGetWorkOrder();
        this.getNoworkOrder();
        this.getShebeiList();
        this.getShebeiListType();
        this.getorderCount();
      }
    },
    // 点击查看显示弹框
    handlerShowPic(id) {
      this.showPicdialogVisible = true;

      const params = {
        id: id
      };

      this.postRequest(orderPathSel, params).then(res => {
        if (res.code == 200) {
          if (res.data.pic.length == 0) {
            this.imglist = "";
            this.imgsrc = "";
          } else {
            this.imglist = res.data.pic;
            this.imgsrc = this.imglist[0].pictureAddress;
          }

          if (res.data.video.length == 0) {
            this.videoList = "";
            this.videosrc = "";
          } else {
            this.videoList = res.data.video;
            this.videosrc = this.videoList[0].videoAddress;
          }
        }
      });
    },
    // 点击小图显示大图
    handlerShowimg(id) {
      this.showimg = true;
      this.imglist.forEach(v => {
        if (id == v.id) {
          this.imgsrc = v.pictureAddress;
        }
      });
    },
    //  视频---
    handlerShowvideo(id) {
      this.showVideo = true;

      this.videoList.forEach(v => {
        if (id == v.id) {
          this.videosrc = v.video;
        }
      });
    },
    // 拿到设备分支的数据
    handlerGetWorkOrder() {
      this.postRequest(menuSel, { companyId: this.org_id }).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.workingWordOption = res.data;
        }
      });
    },
    handleChange(workingStr) {
      this.ruleForm.projectId = workingStr[0];
      this.ruleForm.groupId = workingStr[1];
      this.ruleForm.storeId = workingStr[2];
    },
    // 获取工单列表的数据
    getNoworkOrder() {
      const params = {
        status: 1,
        pageNumber: this.ruleForm.pageNumber,
        pageSize: this.ruleForm.pageSize,
        startTime: this.ruleForm.startTime,
        endTime: this.ruleForm.endTime,
        companyId: this.org_id
      };
      this.postRequest(orderSearch, params).then(res => {
        if (res.code == 200) {
          res.data.data.forEach(item => this.showTimeline.push(false));
          this.workingOrderlist = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.handlerClickSerach();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNumber = val;
      this.handlerClickSerach();
    },
    handlerSerah() {
      this.ruleForm.pageNumber = 1;
      this.handlerClickSerach();
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      // const result = value.join("");
      // result.substring(10, 0)
      //  result.substring(10)

      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.ruleForm.startTime = "";
        this.ruleForm.endTime = "";
        this.handlerClickSerach();
      } else {
        this.ruleForm.startTime = value[0];
        this.ruleForm.endTime = value[1];
        this.handlerClickSerach();
      }
    },
    // 获取设备型号列表
    getShebeiList() {
      this.postRequest(devicModelList, { companyId: this.org_id }).then(res => {
        this.sheList = res.data;
      });
    },
    //获取设备类型列表
    getShebeiListType() {
      this.postRequest(devicTypeList, { companyId: this.org_id }).then(res => {
        this.sheType = res.data;
      });
    },
    // 点击搜索
    handlerClickSerach() {
      this.ruleForm.companyId = this.org_id;

      this.postRequest(orderSearch, this.ruleForm).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.workingOrderlist = res.data.data;
          this.count = res.data.count;
        }
      });
    },

    // 获取工单进度
    handlerProscc(e, id, index) {
      // 首先让工单列表为空
      this.orderProcessList = [];
      const list = JSON.parse(JSON.stringify(this.showTimeline));
      for (let i = 0; i < list.length; i++) {
        if (i === index) {
          list[i] = !list[i];
        } else {
          list[i] = false;
        }
      }
      this.showTimeline = list;
      if (e) {
        this.postRequest(orderProcess, { id }).then(res => {
          if (res.code == 200) {
            this.orderProcessList = res.data;
            if (this.orderProcessList[0].add_time == null) {
              this.orderNO = "暂无工单信息";
            }
          }
        });
      }
    },
    // 点击任务派单拿到工单id跳转到派单页面
    handlerTask(id) {
      this.$router.push("/TaskDispatch");
      window.sessionStorage.setItem("orderId", id);
    },
    // 获取工单统计数据
    getorderCount() {
      const params = {
        processingStatus: this.ruleForm.status,
        companyId: this.org_id
      };
      this.postRequest(orderCount, params).then(res => {
        if (res.code == 200) {
          this.orderCountList = res.data;
        }
      });
    },
    handleClose() {
      this.showPicdialogVisible = false;
    },
    // 点击忽略工单
    handlerNowork(id, deviceId) {
      this.huDialog = !this.huDialog;
      this.NoOrderId = id;
      this.deviceId = deviceId;
    },
    // 点击确定忽略工单
    handlerSureOrder() {
      const params = {
        id: this.NoOrderId,
        userId: this.userId,
        status: 9,
        deviceId: this.deviceId,
        remark: this.huForm.remark
      };
      this.postRequest(orderStatusChange, params).then(res => {
        if (res.code == 200) {
          this.$message.success("工单状态更改成功");
          this.huDialog = false;
          this.getNoworkOrder();
        }
      });
    }
  },
  created() {
    this.getDataInit();
    this.userId = window.sessionStorage.getItem("userId");
  }
  // watch: {
  //   value1(newVal) {
  //     if (newVal == null) {
  //       console.log(newVal)
  //       this.newVal = [];
  //       this.getNoworkOrder();
  //     }
  //   }
  // }
};
</script>
<style lang="less">
// 代办工单
.workOrder_wating {
  padding: 20px;
  .order_style {
    width: 300px;
  }
  // 日历
  .workDate {
    width: 100%;
    box-sizing: content-box;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    .work_date {
      margin-left: auto;
    }
  }
  // 所有搜索框
  .workSerach {
    border: 1px solid #edeff4;
    padding: 20px;
  }

  .demo-ruleForm {
    margin-top: 15px;
  }
  // 下边部分
  .work_bottom {
    display: flex;
    flex-direction: column;
    //按钮
    .work_btn {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 20px 0;
      .work_btn_item {
        flex: 1;
        // background: #0077f8;
        width: 450px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 5px;
        margin-right: 20px;
        // margin: 20px;
        &:last-of-type {
          margin-right: 0px;
        }
        .work_btn_item_left {
          line-height: 40px;
          // color: #fff;
          padding-left: 20px;
        }
        .work_btn_item_right {
          display: flex;
          flex-direction: row;
          margin-left: auto;
          position: relative;
          .line {
            width: 2px;
            height: 60%;
            // background: #fff;
            position: absolute;
            top: 20%;
            left: -75%;
          }
          .line_border {
            margin-left: auto;
            width: 80px;
            height: 80px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            position: relative;
            top: 50%;
            left: 19%;
            transform: translate(-50%, -50%);
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
    .el-carousel__item {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    //内容
    .work_bottom_jindu {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0px;
      margin: 0 auto;
      .work_bottom_jindu_top {
        border: 1px solid #edeff4;
        .work_bottom_right {
          display: flex;
          flex-direction: column;
          width: 150px;
          float: right;
          // 任务派单按钮
          .work_bottom_jindu_top_one_btn {
            float: right;
            margin: 20px;
          }
        }

        // 第一个ul
        .work_bottom_jindu_top_one {
          display: flex;
          flex-direction: column;
          line-height: 30px;
          margin: 20px;
          font-size: 13px;
        }
        .work_bottom_jindu_top_two {
          height: 100px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          color: #9ea0a5;
        }
      }
      .work_bottom_jindu_down {
        display: flex;
        flex-direction: row;
        line-height: 30px;
        border: 1px solid #edeff4;
        margin-top: 30px;
        .work_bottom_jindu_down_left {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 20px;
          font-size: 15px;
          margin-top: 20px;
          .work_bottom_jindu_down_left_two {
            width: 100%;
            margin-top: 20px;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-wrap: wrap;
            color: #9ea0a5;
          }
        }
        .work_bottom_jindu_down_right {
          margin-left: auto;
          margin: 20px;
          .el-button {
            margin: 10px;
          }
        }
      }
    }
  }
  .el-carousel /deep/ .el-carousel__container {
    height: 500px !important;
  }
  .showvideo {
    width: 150px;
    height: 150px;
    margin-right: 20px;
  }
}
</style>
